<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="/templates/template.xhtml">
    <ui:define name="metadata">
    </ui:define>
    <ui:define name="content">
        <section class="content-header">
            <h1>
                Inicio
                <small>Demo Primefaces 5.0</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
            </ol>
        </section>
        <p:messages autoUpdate="true" id="msgs" showSummary="true" showDetail="true" closable="true"/>
        <section class="content">
            <div class="row">
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-aqua">
                        <div class="inner">
                            <h3>
                                <h:outputText id="prestamos" value="#{homeAdmin.prestamos.size()}"/>
                            </h3>
                            <p>
                                Prestamos
                            </p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-android-data"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Más Información <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div><!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-red">
                        <div class="inner">
                            <h3>
                                <h:outputText id="adeudos" value="#{homeAdmin.adeudos.size()}"/>
                            </h3>
                            <p>
                                Adeudos
                            </p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-alert"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Más Información <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-green">
                        <div class="inner">
                            <h3>
                                <h:outputText id="peliculas" value="#{homeAdmin.peliculas.size()}"/> 
                            </h3>
                            <p>
                                Películas Registradas
                            </p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-ios7-film"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Más Información <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div><!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-yellow">
                        <div class="inner">
                            <h3>
                                <h:outputText id="usuarios" value="#{homeAdmin.usuarios.size()}"/> 
                            </h3>
                            <p>
                                Usuarios Registrados
                            </p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Más Información <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>

                <div class="col-md-4">
                    <!-- Default box -->
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">Prestamos</h3>
                            <div class="box-tools pull-right">
                                <button class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip" title="Colapsar"><i class="fa fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            Box class: <code>.box</code>
                            <p>
                                amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
                                berliner weisse wort chiller adjunct hydrometer alcohol aau!
                                sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
                            </p>
                        </div><!-- /.box-body -->
                        <div class="box-footer">
                            <code>.box-footer</code>
                        </div><!-- /.box-footer-->
                    </div><!-- /.box -->
                </div><!-- /.col -->

                <div class="col-md-4">
                    <!-- Default box -->
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">Prestamos</h3>
                            <div class="box-tools pull-right">
                                <button class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip" title="Colapsar"><i class="fa fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            Box class: <code>.box</code>
                            <p>
                                amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
                                berliner weisse wort chiller adjunct hydrometer alcohol aau!
                                sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
                            </p>
                        </div><!-- /.box-body -->
                        <div class="box-footer">
                            <code>.box-footer</code>
                        </div><!-- /.box-footer-->
                    </div><!-- /.box -->
                </div><!-- /.col -->

                <div class="col-md-4">
                    <!-- Default box -->
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">Prestamos</h3>
                            <div class="box-tools pull-right">
                                <button class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip" title="Colapsar"><i class="fa fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            Box class: <code>.box</code>
                            <p>
                                amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
                                berliner weisse wort chiller adjunct hydrometer alcohol aau!
                                sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
                            </p>
                        </div><!-- /.box-body -->
                        <div class="box-footer">
                            <code>.box-footer</code>
                        </div><!-- /.box-footer-->
                    </div><!-- /.box -->
                </div><!-- /.col -->
                <div class="col-xs-12">
                    <div class="box box-primary"> 
                        <br/>
                        <h:form id="consulta">
                            <p:panel header="Adeudos de Peliculas" toggleable="true"> 
                                <p:dataTable id="tabla" var="a" value="#{homeAdmin.adeudos}" currentPageReportTemplate="(Mostrando: {startRecord} - {endRecord} de: {totalRecords}, Página: {currentPage}/{totalPages})"  
                                             paginator="true" rows="10" filterEvent="enter" filteredValue="#{homeAdmin.adeudosFilter}" rowKey="#{a.id}" widgetVar="tabla"
                                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                             rowsPerPageTemplate="5,10,20,50,100,500" emptyMessage="No se encontraron registros.">
                                    <f:facet name="header">
                                        <p:outputPanel>
                                            <h:outputText value="Buscar:" />
                                            <p:inputText id="globalFilter" onkeyup="PF('tabla').filter()" style="width:150px" placeholder="Ingresa una palabra"/>
                                        </p:outputPanel>
                                    </f:facet>
                                    <p:column style="text-align: center" filterBy="#{a.id.id}" filterMatchMode="contains"> 
                                        <f:facet name="header">  
                                            <h:outputText value="ID" />  
                                        </f:facet> 
                                        <h:outputText value="#{a.id.id}" />  
                                    </p:column>  
                                    <p:column style="text-align: center" filterBy="#{a.cliente.nombre}" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Cliente" />  
                                        </f:facet> 
                                        <h:outputText value="#{a.cliente.nombre}" />  
                                    </p:column>  
                                    <p:column style="text-align: center" filterBy="#{a.pelicula.titulo}" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Película" />  
                                        </f:facet> 
                                        <h:outputText value="#{a.pelicula.titulo}" />  
                                    </p:column>
                                    <p:column style="text-align: center" filterBy="#{a.fechaEntrega}" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Fecha de Entrega" />  
                                        </f:facet>
                                        <h:outputText value="#{a.fechaEntrega}">
                                            <f:convertDateTime type="date" pattern="dd-MM-yyyy"/>
                                        </h:outputText>  
                                    </p:column>
                                    <p:column style="text-align: center" filterBy="#{a.fechaDevolucion}" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Fecha de Devolución" />  
                                        </f:facet>
                                        <h:outputText value="#{a.fechaDevolucion}" style="font-weight:bold; color: red;">
                                            <f:convertDateTime type="date" pattern="dd-MM-yyyy"/>
                                        </h:outputText>  
                                    </p:column>                        
                                    <p:column headerText="Devolución" style="text-align: center" exportable="false">  
                                        <p:commandButton icon="ui-icon-check" actionListener="#{homeAdmin.devolucion(a)}" update="@form,:form1">
                                            <p:confirm header="Confirmación" message="Registrar Devolución?" icon="ui-icon-alert" />
                                        </p:commandButton>
                                    </p:column>
                                    <f:facet name="footer">
                                        Exportar datos:
                                        <h:commandLink>
                                            <p:graphicImage value="#{resource['images/excel.png']}" title="Formato .xls"/>  
                                            <p:dataExporter type="xls" target="tabla" fileName="prestamos" />  
                                        </h:commandLink>
                                    </f:facet>
                                </p:dataTable>     
                            </p:panel>
                        </h:form>
                    </div>
                </div>
            </div>
        </section>
        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode" appendTo="@(body)">
            <h:form>
                <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
            </h:form>
        </p:confirmDialog>
    </ui:define>
</ui:composition>

